<template>
  <p>count:{{ counterStore.count }}</p>
  <p>doubleCount:{{ counterStore.doubleCount }}</p>
  <p>doubleCountPlusOne:{{ counterStore.doubleCountPlusOne }}</p>
  <p>plusAmount5:{{ counterStore.plusAmount(5) }}</p>
  <p>plusFirstName:{{ counterStore.plusFirstName }}</p>
  <p>age:{{ counterStore.age }}</p>
  <p>name:{{ counterStore.name }}</p>
  <button @click="counterStore.increment">+</button>
  <button @click="counterStore.decrement">-</button>
  <button @click="counterStore.$reset()">reset</button>
  <button @click="patchState">patch</button>
</template>
<script setup>
import { useCounterStore } from "../stores/counterStore";
const counterStore = useCounterStore();
//监听此仓库的状态变化，变化之后执行回调
/* counterStore.$subscribe((mutation, state)=>{
  localStorage.setItem('counter',JSON.stringify(state));
}) */
const patchState = () => {
  counterStore.$patch({
    count: counterStore.count + 1,
    age: 120,
    name: "DIO",
  });
};
</script>
